<template>
    <view class="uni-popup-dialog">
        <view class="uni-dialog-title">
            <text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{ titleText }}</text>
        </view>
        <view v-if="mode === 'base'" class="uni-dialog-content">
            <slot>
                <text class="uni-dialog-content-text">{{ content }}</text>
            </slot>
        </view>
        <view v-else class="uni-dialog-content">
            <slot>
                <input class="uni-dialog-input" v-model="val" :type="inputType" :placeholder="placeholderText"
                       :focus="focus">
            </slot>
        </view>
        <view class="uni-dialog-button-group">
            <view class="uni-dialog-button" @click="closeDialog">
                <text class="uni-dialog-button-text">{{ closeText }}</text>
            </view>
            <view class="uni-dialog-button uni-border-left" @click="onOk">
                <text class="uni-dialog-button-text uni-button-color">{{ okText }}</text>
            </view>
        </view>

    </view>
</template>

<script>
import popup from '../uni-popup/popup.js'
import {
    initVueI18n
} from '@dcloudio/uni-i18n'
import messages from '../uni-popup/i18n/index.js'

const {t} = initVueI18n(messages)
/**
 * PopUp 弹出层-对话框样式
 * @description 弹出层-对话框样式
 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
 * @property {String} value input 模式下的默认值
 * @property {String} placeholder input 模式下输入提示
 * @property {String} type = [success|warning|info|error] 主题样式
 *  @value success 成功
 *    @value warning 提示
 *    @value info 消息
 *    @value error 错误
 * @property {String} mode = [base|input] 模式、
 *    @value base 基础对话框
 *    @value input 可输入对话框
 * @property {String} content 对话框内容
 * @property {Boolean} beforeClose 是否拦截取消事件
 * @event {Function} confirm 点击确认按钮触发
 * @event {Function} close 点击取消按钮触发
 */

export default {
    name: "uniPopupDialog",
    mixins: [popup],
    emits: ['confirm', 'close'],
    props: {
        inputType: {
            type: String,
            default: 'text'
        },
        value: {
            type: [String, Number],
            default: ''
        },
        placeholder: {
            type: [String, Number],
            default: ''
        },
        type: {
            type: String,
            default: 'error'
        },
        mode: {
            type: String,
            default: 'base'
        },
        title: {
            type: String,
            default: ''
        },
        content: {
            type: String,
            default: ''
        },
        beforeClose: {
            type: Boolean,
            default: false
        },
        cancelText: {
            type: String,
            default: ''
        },
        confirmText: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            dialogType: 'error',
            focus: false,
            val: ""
        }
    },
    computed: {
        okText() {
            return this.confirmText || t("uni-popup.ok")
        },
        closeText() {
            return this.cancelText || t("uni-popup.cancel")
        },
        placeholderText() {
            return this.placeholder || t("uni-popup.placeholder")
        },
        titleText() {
            return this.title || t("uni-popup.title")
        }
    },
    watch: {
        type(val) {
            this.dialogType = val
        },
        mode(val) {
            if (val === 'input') {
                this.dialogType = 'info'
            }
        },
        value(val) {
            this.val = val
        }
    },
    created() {
        // 对话框遮罩不可点击
        this.popup.disableMask()
        // this.popup.closeMask()
        if (this.mode === 'input') {
            this.dialogType = 'info'
            this.val = this.value
        } else {
            this.dialogType = this.type
        }
    },
    mounted() {
        this.focus = true
    },
    methods: {
        /**
         * 点击确认按钮
         */
        onOk() {
            if (this.mode === 'input') {
                this.$emit('confirm', this.val)
            } else {
                this.$emit('confirm')
            }
            if (this.beforeClose) return
            this.popup.close()
        },
        /**
         * 点击取消按钮
         */
        closeDialog() {
            this.$emit('close')
            if (this.beforeClose) return
            this.popup.close()
        },
        close() {
            this.popup.close()
        }
    }
}
</script>

<style lang="scss">
.uni-popup-dialog {
    width: 300px;
    border-radius: 11px;
    background-color: #fff;
}

.uni-dialog-title {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    justify-content: center;
    padding-top: 25px;
}

.uni-dialog-title-text {
    font-size: 16px;
    font-weight: 500;
}

.uni-dialog-content {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.uni-dialog-content-text {
    font-size: 14px;
    color: #6C6C6C;
}

.uni-dialog-button-group {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    border-top-color: #f5f5f5;
    border-top-style: solid;
    border-top-width: 1px;
}

.uni-dialog-button {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */

    flex: 1;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 45px;
}

.uni-border-left {
    border-left-color: #f0f0f0;
    border-left-style: solid;
    border-left-width: 1px;
}

.uni-dialog-button-text {
    font-size: 16px;
    color: #333;
}

.uni-button-color {
    color: #007aff;
}

.uni-dialog-input {
    flex: 1;
    font-size: 14px;
    border: 1px #eee solid;
    height: 40px;
    padding: 0 10px;
    border-radius: 5px;
    color: #555;
}

.uni-popup__success {
    color: #4cd964;
}

.uni-popup__warn {
    color: #f0ad4e;
}

.uni-popup__error {
    color: #dd524d;
}

.uni-popup__info {
    color: #909399;
}
</style>
